<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>群组删除人员</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="${ctx}/layui/css/layui.css" media="all"/>
  <link rel="stylesheet" href="${ctx}/extends/zTree_v3/css/zTreeStyle/zTreeStyle.css"/>
  <link rel="stylesheet" href="${ctx}/iconfont/iconfont.css"/>
  <script type="text/javascript">
    var __ctx = "${ctx}";
  </script>
  <style>
    /*新建群聊样式*/
    .delgroupPersonnels li div{
      width: 20px;
      height: 20px;
      margin: 0 8px 0 0;
      border-radius:10px ;
      display: inline-block;
      vertical-align: middle;
      background-size: 100% 100%;
    }
    .delgroupPersonnels li span,.delgroupPersonnels li i{
      display: inline-block;
      vertical-align: middle;
      height: 20px;
    }
    .delgroupPersonnels li i{
      margin-left: 5px;
      cursor:pointer;
    }
    .delgroupPersonnels li{
      color: #FF5722;
      margin-bottom: 6px;
      white-space: nowrap;
    }
    .delgroupPersonnels li span span{
      color: #FF5722!important;
      font-weight:normal!important;
      vertical-align: unset;
      display: unset;
      height: unset;
    }
    .ztree li span.button.ico_docu{
      background-size: 100% 100% !important;
      border-radius: 8px;
    }
  </style>
</head>
<body>
<!--群聊删除人员-->
<div class="addcreatGroups">
  <div class="leftSelect" style="margin: 10px 0 0 10px;float: left">
    <input type="text" class="addmainPanelSelectPen">
    <ul id="addmainPanelSelect" class="ztree" style="height: 310px;width:230px;overflow: auto"></ul>
  </div>
  <div class="rightSelect" style="float: left;margin-top: 35px;margin-left: 6px">
    <p style="position: absolute;top: 5px">已选删除人员列表</p>
    <ul class="delgroupPersonnels" style="height: 310px;width:230px;overflow: auto;"></ul>
  </div>
</div>
<button type="button" class="delcreatGroupsData" style="display:none" ccpim-event="delcreatGroupsData"></button>
<script src="${ctx}/extends/jquery.min.js"></script>
<script src="${ctx}/layui/layui.js"></script>
<script src="${ctx}/public/component.js" type="text/javascript"></script>
<script src="${ctx}/extends/zTree_v3/js/jquery.ztree.all.min.js" type="text/javascript"></script>
<script src="${ctx}/extends/zTree_v3/js/jquery.ztree.exhide.min.js" type="text/javascript"></script>
<script>
  layui.use(['jquery','layer'], function(){
    var $=layui.jquery,layer=layui.layer;
    var groupid='${roomId}';

    var userinfo=[];

    deldatainitialization();
    function deldatainitialization(){
      userinfo=[];
      $('.delgroupPersonnels').html('');
      $.ajax({
        url:serverPath.systemPath +"/im/mainPanelInit?roomId="+groupid+"&type=2" ,
        type: "get",
        contentType: 'application/json',
        dataType: 'json',
        success: function(data) {
          var datas = data.data;
          var zNodes=[];
          for (var i=0;i<datas.friend.length;i++){
            var childrens=datas.friend[i].list;
            var dataChildren=[];
            for (var j=0;j<childrens.length;j++){
              dataChildren.push({
                icon:childrens[j].avatar,
                id:childrens[j].id,
                name:childrens[j].username
              });
            }
            zNodes[i]={
              name:datas.friend[i].groupname,
              children:dataChildren
            }
          }
          var setting = {
            data: {
              simpleData: {
                enable: true
              }
            },
            view: {
              showLine: false
            },
            callback: {
              onClick: onClick
            }
          };
          $.fn.zTree.init($('#addmainPanelSelect'), setting, zNodes);
          var treeObj = $.fn.zTree.getZTreeObj('addmainPanelSelect');
          treeObj.expandAll(true);
          component.fuzzySearch('addmainPanelSelect','.addmainPanelSelectPen',null,true); //初始化模糊搜索方法
          function onClick(event, treeId, treeNode, clickFlag) {
            if (treeNode.children) {
              return false;
            }
            for(i=0;i<userinfo.length;i++) {
              if (userinfo[i].id==treeNode.id){
                return false;
              }
            }
            userinfo.push({id: treeNode.id, name: treeNode.name});
            $('.delgroupPersonnels').append('<li><div style="background-image:url(' + treeNode.icon + ')"></div><span>' + treeNode.name + '</span><i class="layui-icon layui-icon-close" id="' + treeNode.id + '" ccpim-event="canGroupPen" style="margin-left: 5px;cursor: pointer"></i></li>')
          }
        },
      });
    }



    var events={
      delcreatGroupsData:function () {
        if(userinfo.length<1){
          layer.alert('请选择数据');
          return false;
        }
        var userIds=[];
        for (var i=0;i<userinfo.length;i++){
          userIds.push(userinfo[i].id);
        }
        $.ajax({
          url: serverPath.imPath + "/im/imRoomUser/delRoomUsers",
          type: "post",
          contentType: 'application/json',
          dataType: 'json',
          data: JSON.stringify({userIds:userIds,roomId:groupid}),
          success: function (result) {
            if(result.code=='0'){
              parent.layer.alert(result.msg,function (index) {
                // deldatainitialization();
                parent.layer.close(index);
                parent.layer.close(parent.layer.getFrameIndex(window.name));
              });
            }else if(result.code=='2'){
              parent.layer.alert(result.msg,function (index) {
                parent.layer.close(index);
                parent.layer.close(parent.layer.getFrameIndex(window.name));
              });
            }else{
              parent.layer.alert(result.msg,function (index) {
                parent.layer.close(index);
              });
            }
          }
        });
      }
      //取消群聊已选人员
      ,canGroupPen:function(){
        var id= $(this).attr('id');
        $(this).parent().remove();
        for (var i=0;i<userinfo.length;i++){
          if(userinfo[i].id==id){
            userinfo.splice(i,1)
          }
        }
      }
    };


    $('body').on('click', '*[ccpim-event]', function(e){
      var othis = $(this), methid = othis.attr('ccpim-event');
      events[methid] ? events[methid].call(this, othis, e) : '';
    });
  })
</script>
</body>
</html>
